<template>
	<div class="page">
		<div class="wos-menu wos-hand" >
			<div :class="menu === '本机设置' ? 'active' : '' " @click="menu = '本机设置'">本机设置</div>
			<div :class="menu === '日期设置' ? 'active' : '' " @click="menu = '日期设置'">日期设置</div>
			<div :class="menu === '假日设置' ? 'active' : '' " @click="menu = '假日设置'">假日设置</div>
			<div :class="menu === '校时权限' ? 'active' : '' " @click="menu = '校时权限'">校时权限</div>
		</div>

		<div v-show="menu === '本机设置'" style="margin: 40px 60px;height:620px">
			<div class="wos-flex mb-20">
				<div class="wos-form-title wos-font-bold">设备名称</div>
				<div>
					<input type="text" class="wos-input">
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-form-title wos-font-bold">设备编号</div>
				<div>
					<input type="text" class="wos-input"> （0-998）
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-form-title wos-font-bold">硬盘满时</div>
				<div>
					<select>
						<option value="停止">停止</option>
						<option value="覆盖">覆盖</option>
					</select>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-form-title wos-font-bold">摄像长度</div>
				<div>
					<input type="text" class="wos-input" value="60"> &nbsp;分钟（1-120）
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div style="position: absolute;margin-left: -30px"><input type="checkbox" checked></div>
				<div class="wos-form-title wos-font-bold">IPC校时间</div>
				<div>
					<input type="text" class="wos-input" value="24"> &nbsp;分钟（1-120）
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-form-title wos-font-bold">抓图路径</div>
				<div>
					<input type="text" class="wos-input" value="c:\PictureDownload">
					<button class="wos-btn wos-btn-no">浏览</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-form-title wos-font-bold">录像路径</div>
				<div>
					<input type="text" class="wos-input" value="c:\PictureDownload">
					<button class="wos-btn wos-btn-no">浏览</button>
				</div>
			</div>
		</div>

		<div v-show="menu === '日期设置'" style="margin: 40px 60px;height:620px">
			<img src="../../assets/images/temp-1.png" alt="">
		</div>

		<div v-show="menu === '假日设置'" style="margin: 40px 60px;height:650px">
			<div class="wos-search-line wos-flex wos-flex-between">
				<div class="wos-flex">

				</div>
				<div class="wos-flex">
					<div class="wos-hand">
						<i class="iconfont icon-jia wos-green"></i> &nbsp; 添加
					</div>
				</div>
			</div>
			<wos-table :record="his"></wos-table>
		</div>

		<div v-show="menu === '校时权限'" style="margin: 40px 60px;height:700px">
			<div class="wos-search-line wos-flex wos-flex-between">
				<div class="wos-flex">
					<input type="checkbox"> &nbsp; &nbsp; 启用
				</div>
				<div class="wos-flex">
					<div class="wos-hand">
						<i class="iconfont icon-jia wos-green"></i> &nbsp; 添加
					</div>
				</div>
			</div>
			<div class="wos-menu wos-hand" style="width: 100%;text-align: left">
				<div :class="menu2 === '白名单' ? 'active' : '' " @click="menu2 = '白名单'">白名单</div>
				<div :class="menu2 === '黑名单' ? 'active' : '' " @click="menu2 = '黑名单'">黑名单</div>
			</div>
			<wos-table :record="names"></wos-table>
		</div>

		<div class="console">
			<button >默认</button>
			<button class="active">确定</button>
			<button >刷新</button>
		</div>
	</div>
</template>

<script>
    export default {
        name: "setup",
        data:function(){
            return {
                menu:"本机设置",
                menu2:"白名单",
                his:{
                    "thead": [
                        {
                            "type": "String",
                            "name": "序号"
                        },{
                            "type": "String",
                            "name": "状态"
                        },{
                            "type": "String",
                            "name": "假日名称"
                        },{
                            "type": "String",
                            "name": "日期"
                        },{
                            "type": "String",
                            "name": "持续时间"
                        },{
                            "type": "String",
                            "name": "重复方式"
                        },{
                            "type": "String",
                            "name": "编辑"
                        },{
                            "type": "String",
                            "name": "删除"
                        }
                    ],
                    "tbody": []
                },
                names:{
                    "thead": [
                        {
                            "type": "String",
                            "name": "IP地址"
                        },{
                            "type": "String",
                            "name": "编辑"
                        },{
                            "type": "String",
                            "name": "删除"
                        }
                    ],
                    "tbody": []
                }
            }
        },
    }
</script>

<style scoped>

</style>
